<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<!--标准mui.css-->
		<link rel="stylesheet" href="../css/mui.min.css">
		<link rel="stylesheet" href="../css/app.css">
		<link rel="stylesheet" href="../css/iconfont.css">
		<!--App自定义的css-->
		<style type="text/css">
			html, body{
				background: #fff;
			}
			.mui-preview-image.mui-fullscreen {
				position: fixed;
				z-index: 20;
				background-color: #000;
			}
			.mui-preview-header,
			.mui-preview-footer {
				position: absolute;
				width: 100%;
				left: 0;
				z-index: 10;
			}
			.mui-preview-header {
				height: 44px;
				top: 0;
			}
			.mui-preview-footer {
				height: 50px;
				bottom: 0px;
			}
			.mui-preview-header .mui-preview-indicator {
				display: block;
				line-height: 25px;
				color: #fff;
				text-align: center;
				margin: 15px auto 4;
				width: 70px;
				background-color: rgba(0, 0, 0, 0.4);
				border-radius: 12px;
				font-size: 16px;
			}
			.mui-preview-image {
				display: none;
				-webkit-animation-duration: 0.5s;
				animation-duration: 0.5s;
				-webkit-animation-fill-mode: both;
				animation-fill-mode: both;
			}
			.mui-preview-image.mui-preview-in {
				-webkit-animation-name: fadeIn;
				animation-name: fadeIn;
			}
			.mui-preview-image.mui-preview-out {
				background: none;
				-webkit-animation-name: fadeOut;
				animation-name: fadeOut;
			}
			.mui-preview-image.mui-preview-out .mui-preview-header,
			.mui-preview-image.mui-preview-out .mui-preview-footer {
				display: none;
			}
			.mui-zoom-scroller {
				position: absolute;
				display: -webkit-box;
				display: -webkit-flex;
				display: flex;
				-webkit-box-align: center;
				-webkit-align-items: center;
				align-items: center;
				-webkit-box-pack: center;
				-webkit-justify-content: center;
				justify-content: center;
				left: 0;
				right: 0;
				bottom: 0;
				top: 0;
				width: 100%;
				height: 100%;
				margin: 0;
				-webkit-backface-visibility: hidden;
			}
			.mui-zoom {
				-webkit-transform-style: preserve-3d;
				transform-style: preserve-3d;
			}
			.mui-slider .mui-slider-group .mui-slider-item img {
				width: auto;
				height: auto;
				max-width: 100%;
				max-height: 100%;
			}
			.mui-android-4-1 .mui-slider .mui-slider-group .mui-slider-item img {
				width: 100%;
			}
			.mui-android-4-1 .mui-slider.mui-preview-image .mui-slider-group .mui-slider-item {
				display: inline-table;
			}
			.mui-android-4-1 .mui-slider.mui-preview-image .mui-zoom-scroller img {
				display: table-cell;
				vertical-align: middle;
			}
			.mui-preview-loading {
				position: absolute;
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
				display: none;
			}
			.mui-preview-loading.mui-active {
				display: block;
			}
			.mui-preview-loading .mui-spinner-white {
				position: absolute;
				top: 50%;
				left: 50%;
				margin-left: -25px;
				margin-top: -25px;
				height: 50px;
				width: 50px;
			}
			.mui-preview-image img.mui-transitioning {
				-webkit-transition: -webkit-transform 0.5s ease, opacity 0.5s ease;
				transition: transform 0.5s ease, opacity 0.5s ease;
			}
			@-webkit-keyframes fadeIn {
				0% {
					opacity: 0;
				}
				100% {
					opacity: 1;
				}
			}
			@keyframes fadeIn {
				0% {
					opacity: 0;
				}
				100% {
					opacity: 1;
				}
			}
			@-webkit-keyframes fadeOut {
				0% {
					opacity: 1;
				}
				100% {
					opacity: 0;
				}
			}
			@keyframes fadeOut {
				0% {
					opacity: 1;
				}
				100% {
					opacity: 0;
				}
			}
			p img {
				max-width: 100%;
				height: auto;
			}
			.mui-content{
				display: none;
				position:relative;
				/*margin-top:44px;*/
				padding:0px!important;
			}
			.mui-content-padded,.mui-content-time{
				margin:5px 10px 0px 10px;	
			}
			.mui-content-time span{
				color:#000;/*#9fa41c;*/
				/*font-weight: 700;*/
			}
			.mui-action-back, .mui-title{
				/*color: #fff;*/
			}
			.mui-bar-nav{
				/*background: #000;*/
			}
			.mui-card-content, .mui-card-footer, .mui-card-header{
				padding: 0;
			}
			.mui-card-img{
				background: #eee;
				padding:10px 10px 0 10px;
			}
			.mui-card-img img{
				border-top-left-radius:8px;
				border-top-right-radius: 8px;
				height:180px;
				
			}
			.mui-card-description{
				padding:10px;
				box-shadow: 0px 0px 20px 5px #000;
				position: relative;
			}
			.mui-card-content p, .mui-card p{
				margin:0!important;
			}
			.mui-slider .mui-slider-group .mui-slider-item{
				height: auto;
			}
		</style>

	</head>

	<body>
		<!--<div class="mui-bar mui-bar-nav">
			<h1 class="mui-title">所有商品</h1>
		</div>-->
		
		<div class="mui-content">
			
			<div class="mui-slider mui-slider-banner">
	          <div class="mui-slider-group mui-slider-loop">
	          	
	          </div>
	              
	        <!--//轮播图中间底部圆点-->
	          <div class="mui-slider-indicator">
	          	
	          </div>
	        </div>
			
			
			<div id="mui-pullrefresh">
			<div id="mui-card-list">
	        	
		       
	        	<!--<div class="mui-card" data-id="4">
					<div class="mui-card-content" >
						<div class="mui-card-img">
							<img src="../images/banner08.jpg" alt="" width="100%"/>
						</div>
						<div class="mui-card-description">
							<p style="color: #333;">这里显示文章摘要，让读者对文章内容有个粗略的概念这里显示文章摘要，让读者对文章内容有个粗略的概念...</p>
							<div class="mui-card-price">￥1999.00</div>
						</div>
					</div>
					<div class="mui-card-footer1">
						<a class="mui-card-link"><i class="iconfont icon-praise"></i> 18<a>
						<a class="mui-card-link mui_icon_share"><i class="iconfont icon-fenxiang"></i> 分享</a>
						<a class="mui-card-link mui-card-last">100 浏览</a>
					</div>
				</div>-->
				
				
	        </div>
	        </div>
		</div>
	</body>
	<script src="../js/mui.min.js"></script>
	<script src="../js/castapp.js"></script>
	<script src="../js/myapp.js"></script>
	<script>
		ca.init();
		var page = 1;
		var limit = 4;
		var d = true;
		var goods_data = '';
		var is_data = true;
		//接收通知消息
		ca.receiveNotice("shijian",function(event){
			//获取对象id
			var isLoading = event.detail.isLoading;
			if(isLoading == 1){
				//初始化轮播数据
				init_banner('goods_slider');
				//初始化列表数据
				get_goods_list(function(){
					//添加
					ca.id('mui-card-list').innerHTML = goods_data;
					//回调注册事件
					var mui_card = ca.className('mui-card');
					for (var i = 0; i < mui_card.length; i++) { //把每个button元素便利出来
			            var button = mui_card[i];
			            if (button.addEventListener) { //判断游览器的兼容问题，如果是ie8以下的用的是else语用代码段里的
			                button.addEventListener("tap", add_event)
			            } else {
			                button.attachEvent("tap", add_event)
			            }
			        }
				});
				//延时加载
				lazyLoading('mui-content',function(){
					
				},1000);
			}
			else{
				ca.className('mui-content')[0].style.display = 'block';
			}
		});
		//标记变量，防止点击过快，误操作
        var flag = true;
		//触发执行事件
        function add_event(e) { //e.currentTarget触发该事件的元素    e.target则是目标节点元素 
        	var thisEl = e.currentTarget;
        	ca.newInterface({id:'goods_detail',url:'goods_detail.html'});
        	//发送通知
        	if(flag){
        		//防止点击过快
        		flag = false;
        		//获取自定义属性值
        		var data_id = thisEl.attributes['data-id'].value;
        		ca.sendNotice('goods_detail','goodsInfo',{id:data_id});
        		setTimeout(function(){flag=true},500);
        	}
			
        	//console.log(thisEl.getElementsByTagName('p')[0].innerText);
        	//console.log(thisEl.getElementsByTagName('img')[0].src);
        	//console.log(thisEl.getAttribute('data-id')); 
        }
        //上拉加载
		ca.refreshUpLoad('mui-pullrefresh',function(dataState){
			console.log(page);
			if(d){
				setTimeout(function(){
					!is_data ? dataState(true) : dataState(false);
					get_goods_list(function(){
					//添加
					ca.id('mui-card-list').innerHTML = goods_data;
					//回调注册事件 
					var mui_card = ca.className('mui-card');
					console.log(mui_card.length);
					for (var i = 0; i < mui_card.length; i++) { //把每个button元素便利出来
			            var button = mui_card[i];
			            if (button.addEventListener) { //判断游览器的兼容问题，如果是ie8以下的用的是else语用代码段里的
			                button.addEventListener("tap", add_event)
			            } else {
			                button.attachEvent("tap", add_event)
			            }
			        }
				});
				},1000);
			}
			else{
				dataState(true);
			}
		});
		function get_goods_list(callBack){
			var access_token = localStorage.getItem('access_token');
			var url = request_url+'/api/public/get_goods_list';
			ca.get({
				url:url,
				data:{
					access_token:access_token,
					page:page,
					limit:limit
				},
				succFn:function(res){
					var json = JSON.parse(res);
					console.log(res);
					if(json.status == 1){
						if(json.result.length <= 0){
							d = false;
							callBack();
							return;
						}
						var html = '';
						var result = json.result;
						for(var i in result){
							html += '<div class="mui-card" data-id="'+result[i].id+'"><div class="mui-card-content">';
							html += '<div class="mui-card-img">';
							html += '<img src="'+result[i].thumb+'" alt="" width="100%"/></div>';
							html += '<div class="mui-card-description">';
							html += '<p style="color: #333;">'+result[i].name+'</p>';
							html += '<div class="mui-card-price">￥'+result[i].price+'</div></div></div></div>';
						}
						goods_data += html;
						page++;
						d = true;
						is_data = json.result.length < limit ? false : true;
						callBack();
					}
					else{
						ca.prompt(json.msg);
					}
				}
			});
		}
	</script>

</html>